<template>
  <ElDescriptions :column="column" border>
    <ElDescriptionsItem label="名称">{{ props.columnName }}【{{columnTypeOptions[data.type]}}】</ElDescriptionsItem>
    <ElDescriptionsItem label="标签">
      <el-input v-model="data.label" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="!isRef" label="默认值">
      <el-input v-model="data.defVal" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="!isRef" label="长度">
      <el-input-number v-model="data.length" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="!isRef" label="是否必填">
      <ElSwitch v-model="data.required" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="!isRef" label="是否唯一">
      <ElSwitch v-model="data.unique" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="!isRef" label="是否大字段">
      <ElSwitch v-model="data.isLarge" />
    </ElDescriptionsItem>
    <ElDescriptionsItem label="注释" :span="column">
      <el-input type="textarea" v-model="data.comment" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isFloat" label="精度">
      <el-input-number v-model="data.precision" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isFloat" label="范围">
      <el-input-number v-model="data.scale" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isString || isNumber" :label="`最小${isString ? '长度' : '值'}`">
      <el-input v-model="data.min" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isString || isNumber" :label="`最大${isString ? '长度' : '值'}`">
      <el-input v-model="data.max" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isRef" label="引用" :span="column">
      <ColumnRelEditor v-model="data.rel" :seed-name="seedName" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isEnum" label="选项" :span="column">
      <OptionsEditor v-model="data.options" />
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script lang="ts" setup>
  import { getSeed } from '@/views/seed-dev'
  import { ElInput, ElInputNumber, ElSwitch, ElDescriptions, ElDescriptionsItem } from 'element-plus'
  import { computed, ref, watch } from 'vue';
  import { columnTypeOptions } from '@/views/types';
  import { save } from '..';
  import { ColumnConfiguration } from '@/views/dev-types';
  import { OptionsEditor } from '../../OptionsEditor';
  import { ColumnRelEditor } from '../../ColumnRelEditor';

  const props = defineProps<{seedName: string, columnName: string, column: ColumnConfiguration}>()
  const isFloat = computed(() => ['float', 'double','decimal'].includes(data.type))
  const isRef = computed(() => data.type === 'ref')
  const isEnum = computed(() => data.type === 'enum')
  const isNumber = computed(() => ['tinyint','smallint','mediumint','int','bigint','double','float','decimal'].includes(data.type))
  const isString = computed(() => ['varchar','tinytext','text','mediumtext','longtext','password','account'].includes(data.type))
  const column = 2

  const data = props.column
</script>